<template>
	<view class="topic-detail">
		<titlebar :back="true" text="话题" :backgroundColor='backgroundColor' :color='color' ref="backTo" />
		<z-paging ref="paging" v-model="communtyList"  @scroll="pageScroll" @query="queryList" :fixed="true" :auto="false">
			<image class="top-img"
				:src="topicItem.detailCover ||'https://dnsverify.pfmoto.com/appstatic/community/topic-top-bg.jpg'"
				mode='aspectFill'></image>
			<view class='t-title'>
				<image src="https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png"
					mode='widthFix'>
				</image>
				<view>{{topicItem.name}}</view>
			</view>
			<view class='t-sub' v-if="topicItem.summary">
				{{topicItem.summary}}
			</view>
			<view class='card-con'>
				<view class='con-title'>最新</view>

				<Card class="Community_cont" :communtyList="communtyList" :from="'topicList-'+backTo"
					@openMement="openMement" @Refresh='loadTopicList(true)' ref='refresh' :loginId="loginId" />

			</view>
			<view @click.stop="joinTopic" :class="addBottom ? 'join-topic': 'join-topic bottom'">
				<image mode='widthFix'
					src='https://dnsverify.pfmoto.com/appstatic/community/join-btn-icon.png'>
				</image>
				参与话题
			</view>
		</z-paging>
		<commentsPop :initValue="initValue" :from="'topicList-'+backTo" v-if='showCommentsPop'
			@openMement="openMement" />
	</view>
</template>

<script>
	// pages/sns/sns_detail/sns_detail.js
	import titlebar from '@/components/titlebar/titlebar'
	import Card from "@components/card/card";
	const app = getApp();
	const util = require("@utils/util.js");
	const network = require("@manager/network-manager.js");
	const dialog = require("@utils/dialog.js");
	import commentsPop from '@/components/comments-pop/comments-pop.vue';

	export default {
		data() {
			return {
				loginId: '',
				opacity: 0,
				color: '#000000',
				backgroundColor: 'rgba(255, 255, 255,0)',
				currentScrollTop: 0,
				addBottom: true,
				topicId: '',
				topicItem: {},
				communtyList: [],
				pagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 20,
					length: 100
				},
				initValue: {},
				showCommentsPop: false,
				backTo: 'index'
			};
		},

		components: {
			titlebar,
			Card,
			commentsPop
		},
		props: {},
		onPageScroll: function(e) {
			let opacity = Number((e.scrollTop / 340).toFixed(2))
			this.backgroundColor = `rgba(255, 255, 255, ${opacity})`
			if (opacity > 0.6) {
				this.color = '#000'
			} else {
				this.color = '#fff'
			}

			// 底部按钮滚动效果
			clearTimeout(timer)
			this.addBottom = false
			let timer = setTimeout(() => {
				this.addBottom = true
			}, 1000)

		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options && options.id) {
				this.topicId = options.id

				this.loadDetail(options.id);
			}

			if (options && options.from) {

				this.backTo = options.from
			}

		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			app.trackPage(util.getNavigationBarTitle());

			this.loginId = app.getUserId()
			// this.$refs.backTo.setBackTo(this.backTo)

		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.loadData(true);
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		mounted() {
			this.$nextTick(() => {
				// 触发下拉加载
				this.$refs.paging.reload();
			})
		},
		methods: {
			pageScroll(e){
				let opacity = Number((e.detail.scrollTop / 340).toFixed(2))
				
				this.backgroundColor = `rgba(255, 255, 255, ${opacity})`
			},
			queryList(pageNo, pageSize) {
				this.loadCommunityList(pageNo, pageSize)
			},
			openMement(val, type) {
				this.initValue = val
				this.showCommentsPop = type
				if (!type) {
					this.$refs.paging.reload();
				}
			},

			/**   
			 * 预览图片  
			 */
			previewImage: function(e) {
				var current = e.target.dataset.src;
				var items = e.target.dataset.items;
				uni.previewImage({
					current: current,
					urls: items
				});
			},
			//话题详情
			loadDetail: function(id) {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_TOPIC_DETAIL;
				var params = {
					"uuid": id
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.topicItem = res.data

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			joinTopic() {
				if (util.isLogin(getApp())) {
					// uni.setStorageSync('topic', {})
					uni.setStorageSync('topic', this.topicItem)
					uni.navigateTo({
						url: '/module_community/pages/moments/moments'
					})

				} else {
					util.jumpLogin("moments")
				}
			},

			loadCommunityList: function(pageNo, pageSize) {
				
				var that = this;
				var uri = app.globalData.config.interfaces.URL_COMMUNITY_LIST;
				var params = {
					"topicId": this.topicId,
					"pageNum": pageNo,
					"pageSize": pageSize
				};
				network.get(uri, params, 'form').then(res => {


					if (res.code == 200) {
						that.$refs.paging.complete(res.data.list);
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},

			//动态详情
			snsDetail: function(row) {

				uni.navigateTo({
					url: '/module_community/pages/moments/detail/detail?id=' + JSON.stringify(row),
					fail(err) {
						console.log(err, 'err')
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	page {
		background: #fff;
		color: #3D3A3A;
	}

	.topic-detail {
		width: 100vw;
		box-sizing: border-box;

		.top-img {
			width: 100%;
			height: 400rpx;
		}

		.t-title {
			display: flex;
			align-items: center;
			line-height: 114rpx;
			font-size: 36rpx;

			image {
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				margin-left: 32rpx;
				margin-right: 12rpx;
			}
		}

		.t-sub {
			margin: 0 32rpx;
			padding: 20rpx;
			background: #EDEDED;
			border-radius: 4rpx;
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.card-con {
			.con-title {
				line-height: 144rpx;
				font-weight: 600;
				font-size: 32rpx;
				padding-left: 32rpx;
			}

			/deep/.user-card {
				border-bottom: 2rpx solid #EDEDED;
			}

			/deep/.user-card:last-child {
				border-bottom: none;
			}
		}

		.join-topic {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 272rpx;
			line-height: 88rpx;
			position: fixed;
			left: calc(50% - 136rpx);
			bottom: 20rpx;
			background: #EA5404;
			box-shadow: 0px 0px 20px rgba(234, 84, 4, 0.2);
			border-radius: 4rpx;
			color: #fff;
			font-size: 28rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			transition: bottom;
			transition-duration: 0.3s;
		}

		.bottom {
			bottom: -300rpx;
		}
	}
</style>
